<template>
  <div class="tradingPage" :style="{height: winHeight + 'px'}">
    <TradHead
      :lang="lang"
    ></TradHead>

    <div class="col col1" :style="{width: col1Width + 'px', minWidth: '739px'}">
      <TradingView
        :lang="lang"
        :langKey="langKey"
        :winMinHeight="winMinHeight"
      ></TradingView>
      <TradingRecord
        :lang="lang"
        :userInfo="mixUserInfo"
        :winMinHeight="winMinHeight"
      ></TradingRecord>
    </div>

    <div class="col col2">
      <OrderBook
        :lang="lang"
        :winMinHeight="winMinHeight"
      ></OrderBook>
      <RealtimeTradeList
        :lang="lang"
        :winMinHeight="winMinHeight"
      ></RealtimeTradeList>
      <Trade
        :lang="lang"
        :userId="mixUserInfo.userId"
        :userInfo="mixUserInfo"
        :defaultCurrencyID="defaultCurrencyID"
      ></Trade>
    </div>
  </div>
</template>

<script>
import TradHead from './components/Head.vue'
import SwModal from '@/components/SwModal'
import commonMixins from '@/mixins/common.js'
import TradingView from './components/TradingView.vue'
import OrderBook from './components/OrderBook.vue'
import RealtimeTradeList from './components/RealtimeTradeList.vue'
import Trade from './components/Trade.vue'
import TradingRecord from './components/TradingRecord.vue'
import realtimePush from './js/realtimePush.js'
import EventBus from '@/service/EventBus.js'
import $ from 'jquery'

export default {
  mixins: [commonMixins],
  data () {
    return {
      // pairs: [],
      pair: {},
      winMinHeight: 600,
      winHeight: 600,
      col1Width: 0,
      defaultCurrencyID: ''
    }
  },
  computed: {
  },
  components: {
    TradHead,
    TradingView,
    OrderBook,
    RealtimeTradeList,
    Trade,
    TradingRecord,
    SwModal
  },
  methods: {
    getCol1Width (data) {
      let that = this
      let $win = $(window)
      let $col1 = $('.tradingPage>.col1')
      let $col2 = $('.tradingPage>.col2')

      var getCol1Width = () => {
        data.winHeight = $win.height() // 动态给于tradingPage全屏高度
        // if (data.winHeight < this.winMinHeight) {
        //   data.winHeight = this.winMinHeight
        // }
        // 动态计算col1宽度=窗口宽度减去col2宽度再减去col1的border-left宽度
        // 在
        data.col1Width = $win.width() - $col2.outerWidth() - parseFloat($col1.css('border-left-width'))
        that.$nextTick(() => {
          $col2.css('left', $col1.outerWidth() + 'px')
        })
      }
      $win.resize(getCol1Width)
      getCol1Width()
    }
  },
  created () {
    EventBus.$on('switchPair', (pair) => {
      this.pair = pair
    })
  },
  mounted () {
    // 设置图表宽度
    this.getCol1Width(this.$data)
  },
  beforeRouteLeave (to, from, next) {
    realtimePush.updateGroup('', this.pair.TradingConfigID).then(() => {
      realtimePush.stop()
    })
    next()
  }
}
</script>
<style lang="less">
@import "./../../mixins.less";
@import "css/adaptation.less";
@white: #b5b8c0;

.tradingPage {
  .mix-clearfix;
  overflow: hidden;
  color: #fff;
  background-color: #000;

  .up {
    color: @upColor;
  }
  .down {
    color: @downColor;
  }
  .noChange {
    color: #fff;
  }

  a {
    color: #fff;
  }
  a:hover, a.active {
    color: #8bb4f5;
  }

  >.col {
    position: absolute;
    top: 50px + @tradingBorderWidth;
    left: 0;
    overflow: hidden;
    font-size: 12px;

    >.head {
      padding: 0 6px;
      height: 28px;
      line-height:  28px;
      font-size: 12px;
      color: #9a9c9e;
      background-color: #303641;
    }
  }
  >.col1 {
    border-left: @tradingBorder;
  }
  >.col2 {
    width: 640px;
    border-left: @tradingBorder;
    border-right: @tradingBorder;
    background-color: @tradingModuleBgColor;
  }

  >.col>.head {
    .title {
      float: left;
    }
  }

  .nicescroll-cursors {
    background-color: #374a6b!important;
  }

  .loginShade {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #80919C;
    background-color: rgba(0, 0, 0, 0.6);

    p {
      width: 50%;
      box-sizing: border-box;
    }
    p.login {
      line-height: 20px;
      text-align: right;
    }
    p.register {
      line-height: 19px;
      padding-left: 8px;
    }
    i.line {
      vertical-align: middle;
      display: inline-block;
      margin-left: 4px;
      margin-top: -3px;
      width: 1px;
      height: 20px;
      background-color: @tradingLinkActiveColor;
    }
    a {
      font-size: 16px;
      white-space: nowrap;
      color: @tradingLinkActiveColor;

      &:first-of-type {
        text-align: right;
      }
    }
  }
}

@media (max-width: 1400px) { // 1366px
  .tradingPage {

    .col2 {
      width: @tradingCol2MinWidth;
    }
  }
}
</style>
